<template>
  <div class="advancedEventConfig">
    <el-collapse-item name="2">
      <template #title>
        <div class="flex-item">
          <div class="title">高级事件配置</div>
          <el-button :icon="Edit" @click.stop size="small">编辑</el-button>
        </div>
      </template>
      <el-card class="collapse-show-box">
        <!-- 函数体 -->
        <div v-for="eventName in EventLife" :key="eventName">
          <p>
            <span class="func-annotate">// {{ EventLifeName[eventName] }}</span>
            <br />
            <span class="func-keyword">async {{ eventName }}</span> (e,
            components, echarts, node_modules) {
          </p>
          <p>}<span>,</span></p>
        </div>
      </el-card>
    </el-collapse-item>
  </div>
</template>

<script setup>
import { Edit } from "@element-plus/icons-vue"

const EventLife = {
  // 渲染之后
  VNODE_MOUNTED: "vnodeMounted",
  // 渲染之前
  VNODE_BEFORE_MOUNT: "vnodeBeforeMount",
}

const EventLifeName = {
  [EventLife.VNODE_BEFORE_MOUNT]: "渲染之前",
  [EventLife.VNODE_MOUNTED]: "渲染之后",
}

const EventLifeTip = {
  [EventLife.VNODE_BEFORE_MOUNT]: "此时组件 DOM 还未存在",
  [EventLife.VNODE_MOUNTED]: "此时组件 DOM 已经存在",
}
</script>

<style lang="scss" scoped>
.advancedEventConfig {
  .flex-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
